<template>
	<view>
		<view class="w90">
			<view class="left20 fs14">
				收货人姓名
			</view>
			<view class="right70 fs12">
				<input class="fs12" style="padding: 5rpx;" @blur="Sname" type="text" value="" placeholder="请输入收货人姓名" />
				<text :class="sex==1?'select':''" @click="Select(1)">先生</text>
				<text :class="sex==2?'select':''" @click="Select(2)" style="margin: 30rpx;">女士</text>
			</view>
		</view>
		<!--  -->
		<view class="w90">
			<view class="left20 fs14" style="padding: 30rpx 0;">
				手机号码
			</view>
			<view class="right70 fs12">
				<input class="fs12" style="padding: 30rpx 0;" type="number" @blur="Smobile" value="" maxlength="11"
					placeholder="请输入手机号码" />
			</view>
		</view>
		<!--  -->
		<view class="w90">
			<view class="left20 fs14" style="padding: 30rpx 0;">
				所在地区
			</view>
			<view class="right70 fs12" @click="getAddress()">
				<i></i>
				<input class="fs12 over" style="padding: 30rpx 0 0 30rpx;" type="text" :value="address"
					placeholder="区/街道/大厦等" />
				<b></b>
			</view>
		</view>
		<!--  -->
		<view class="w90">
			<view class="left20 fs14" style="padding: 30rpx 0;">
				详细地址
			</view>
			<view class="right70 fs12" style="border: 0;">
				<input class="fs12" style="padding: 30rpx 0;" @blur="Saddress" type="number" value="" placeholder="楼牌号等" />
			</view>
		</view>
		<!-- 保存 -->
		<view style="height: 16rpx;background-color: rgba(248,248,248,1);margin-top: 10rpx;"></view>
		<view class="w233 fs14" @click="baocun">保存</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				name: '', //姓名
				sex: '', //	性别,1-男,2-女
				mobile: '', //	联系电话
				address: '', //	收货地址
				detail: '', //门牌号
				default: '', //	是否设为默认地址,1-是,0-否
				id: '', //	地址ID,值不为空时为编辑
				// latitude: 39.89631551,
				// longitude: 116.323459711,
				chooseLocation: '中国',
			}
		},
		onLoad() {
			// this.getAddress();
			console.log(this.latitude,this.longitude)
		},
		// 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
		onShow() {
			const chooseLocation = requirePlugin('chooseLocation');
			const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
			console.log("您所选择的位置：111111", location,);
			
			if (location) {
				this.address = location.address
				this.chooseLocation = location.address;
			}
		},
		onUnload() {
			// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
			chooseLocation.setLocation(null);
		},
		methods: {
			Select(id) {
				this.sex = id
			},
			Sname(e) {
				this.name = e.target.value
				console.log('名字' + this.name)
			},
			Smobile(e) {
				this.mobile = e.target.value
				console.log('联系电话' + this.mobile)
			},
			Saddress(e) {
				this.detail = e.target.value
				console.log('详细地址' + this.detail)
			},
			getAddress() {
				const key = 'NFFBZ-PSN63-TXM3A-3YY23-7HCDO-YUBQ2'; //使用在腾讯位置服务申请的key
				const referer = '水流外卖'; //调用插件的app的名称
				const location = JSON.stringify({
					latitude:this.latitude,
					longitude:this.longitude
				});
				const category = '生活服务,娱乐休闲';
				wx.navigateTo({
					url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&category=' +
						category
				});
			},
			baocun(){
				this.$request('api/user/address/store',{
					name:this.name,
					sex:this.sex,
					mobile:this.mobile,
					address:this.address,
					detail:this.detail,
					longitude:this.longitude,
					latitude:this.latitude
				},"POST",{Authorization:this.token}).then(res => {
					this.backPageRefresh()
					console.log(res)
					console.log(this.name,this.sex,this.mobile,this.address,this.detail,this.longitude,this.latitude)
				})
			},
			// 返回刷新
			backPageRefresh() {
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 2]; // 前一个页面
				// console.log("beforePage", beforePage);
				// console.log(pages);
				uni.navigateBack({
					delta: 1,
					success: function() {
						beforePage.$vm.refreshRequest(); // 执行前一个页面的刷新
					}
				});
			}
		},
		computed: {
			...mapState(['token','longitude','latitude'])
		}
	}
</script>

<style>
	.title {
		position: relative;
	}
	.over{
		width: 78%;
		text-overflow:ellipsis; 
	}

	.select {
		color: #23BD80;
		border: 1rpx solid #23BD80;
	}

	.returnh {
		width: 20px;
		height: 20px;
		position: absolute;
		left: 34rpx;
		top: 25rpx;
	}

	.title>text {
		display: block;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		line-height: 88rpx;
	}

	.w90 {
		width: 90%;
		margin: 0 auto;
		display: flex;
	}

	.left20 {
		width: 25%;
		color: #333333;
	}

	.right70 {
		width: 70%;
		margin-left: 50rpx;
		border-bottom: 1rpx solid rgba(216, 216, 216, 1);
		position: relative;
	}

	.right70>text {
		display: inline-block;
		padding: 8rpx 20rpx;
		margin: 10rpx 0;
		border: 1rpx solid rgba(227, 227, 227, 1);
	}

	.right70>i {
		display: inline-block;
		width: 22rpx;
		height: 32rpx;
		background: url(../../../static/icon2167.png);
		position: absolute;
		left: 0;
		top: 30rpx;
	}

	.right70>b {
		display: inline-block;
		width: 12rpx;
		height: 18rpx;
		background: url(../../../static/iconfh.png);
		position: absolute;
		right: 30rpx;
		top: 40rpx;
	}

	.w233 {
		width: 466rpx;
		height: 76rpx;
		color: #FFFFFF;
		background: rgba(36, 188, 129, 1);
		text-align: center;
		line-height: 76rpx;
		margin: 160rpx auto;
	}
</style>
